import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface BarPolarStackProps {
    chartId?: string;
    width?: string;
    height?: string;
    legend?: string[];
    radiusAxisData?: string[];
    seriesData?: number[][];
}

@customElement('lit-bar-polar-stack')
export class LitBarPolarStack extends LitElement {
    @property({type: String}) chartId: string = 'lit-bar-polar-stack-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Array}) radiusAxisData: string[] = ['Mon', 'Tue', 'Wed', 'Thu'];
    @property({type: Array}) legend: string[] = ['A', 'B', 'C'];
    @property({type: Array}) seriesData: number[][] = [
        [1, 2, 3, 4],
        [2, 4, 6, 8],
        [1, 2, 3, 4]
    ];

    getSeries(): any[] {
        return this.seriesData.map((data, index) => ({
            name: this.legend[index] || undefined,
            type: 'bar',
            data: data,
            coordinateSystem: 'polar',
            stack: 'a',
            emphasis: {
                focus: 'series'
            }
        }));
    }

    option: echarts.EChartsOption = {
        angleAxis: {},
        radiusAxis: {
            type: 'category',
            data: this.radiusAxisData,
            z: 10
        },
        polar: {},
        series: this.getSeries(),
        legend: {
            show: true,
            data: this.legend,
        }
    };

    static styles = style;

    updated() {
        this.option.legend = {data: this.legend};
        (this.option.radiusAxis as any).data = this.radiusAxisData;
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-bar-polar-stack': LitBarPolarStack;
    }
}